<template>
  <borderContainer bg-color="#fffbea" bd-color="#f6ce89" class="group-flow">
    <view class="group-flow-content">
      <view
        v-for="(step, index) in stepSource"
        :key="step.id"
        class="content-item"
      >
        <view class="content-item-num">
          {{ index + 1 }}
        </view>
        <view class="content-item-title">
          {{ step.title }}
        </view>
      </view>
    </view>
    <cloudTitle class="group-flow-tips">
      组团流程
    </cloudTitle>
  </borderContainer>
</template>
<script>
import cloudTitle from "./cloud-container";
import borderContainer from "@/components/border-box/index";
const FLOW_SOURCE = Object.freeze([
  {
    id: 1,
    title: "组团/参团"
  },
  {
    id: 2,
    title: "邀请好友"
  },
  {
    id: 3,
    title: "成团奖励"
  },
  {
    id: 4,
    title: "全员打卡奖励"
  }
]);
export default {
  components: {
    cloudTitle,
    borderContainer
  },
  data() {
    return {
      stepSource: FLOW_SOURCE
    };
  }
};
</script>
<style lang="scss">
.group-flow {
  position: relative;
  box-sizing: border-box;
  height: 250px;
  padding: 90px 26px 0 30px;
  margin-bottom: 68px;
  &-content {
    display: flex;
    position: relative;
    .content-item {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      // flex: 1;
      &:nth-child(1) {
        width: 108px;
        margin-right: 60px;
      }
      &:nth-child(2) {
        width: 96px;
        margin-right: 64px;
      }
      &:nth-child(3) {
        width: 96px;
        margin-right: 44px;
      }
      &:nth-child(4) {
        width: 144px;
        .content-item-num::after {
          width: 62px;
        }
        .content-item-num::before {
          content: "";
          position: absolute;
          right: -80px;
          top: 50%;
          transform: translateY(-8px);
          background-image: url("../../../../assets/icon/flow-right.png");
          background-size: 100% 100%;
          width: 12px;
          height: 20px;
        }
      }
      &-num {
        box-sizing: border-box;
        width: 52px;
        height: 52px;
        background: #ffd700;
        border: 2px solid #a13d0f;
        border-radius: 50%;
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: bold;
        line-height: 48px;
        color: #a13d0f;
        text-align: center;
        margin-bottom: 20px;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          left: 52px;
          top: 50%;
          width: 108px;
          height: 0px;
          border: 2px dashed #a13d0f;
        }
      }
      &-title {
        text-align: center;
        height: 34px;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #303133;
      }
    }
  }
  &-tips {
    top: -90px;
  }
  .content-slot {
    padding: 0;
  }
}
</style>
